<template>
  <v-layout>
    <v-navigation-drawer location="left" expand-on-hover rail permanent name="drawer">
      <v-list>
        <v-list-item prepend-avatar="https://randomuser.me/api/portraits/women/85.jpg" title="Sandra Adams"
          subtitle="sandra_a88@gmailcom"></v-list-item>
      </v-list>

      <v-divider></v-divider>

      <v-list density="compact" nav>
        <template v-for="(item, index) in routesOption">
          <v-list-item v-if="!item.children" :title="item.title" :value="item.value" :key="item.value"
            @click="routeChange(item)">
            <template #prepend><v-icon size="large" :icon="`mdi-${item.icon}`"></v-icon></template>
          </v-list-item>

          <v-list-group v-else :key="item.value" :value="item.value">
            <template v-slot:activator="{ props }">
              <v-list-item v-bind="props" :prepend-icon="item.icon" :title="item.title">
                <template #prepend><v-icon size="large" :icon="`mdi-${item.icon}`"></v-icon></template>
              </v-list-item>
            </template>

            <v-list-item v-for="(itemc, indexc) in item.children" :key="itemc.value" :title="itemc.title"
              :prepend-icon="itemc.icon" :value="itemc.value" :to="itemc.path" @click="routeChange(item)">
              <template #prepend><v-icon size="large" :icon="`mdi-${itemc.icon}`"></v-icon></template>
            </v-list-item>
          </v-list-group>
        </template>
      </v-list>
    </v-navigation-drawer>
  </v-layout>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";
import service from "@/api/index.ts";
const router = useRouter();
interface menuItem {
  icon: string;
  title: string;
  value: string;
}

const routesOption = ref<menuItem[]>();
const routesFlag = ref([false, false, true]);

const comboRoute = (routes: Array<any>): any => {
  if (!routes || routes.length === 0) return undefined;
  return routes.map((x: any) => {
    const children = comboRoute(x.children);
    return { ...x.meta, path: x.path, children, selected: false };
  });
};

const initMenu = () => {
  const routes = router.getRoutes().find((a) => a.path == "/")!.children;
  routesOption.value = comboRoute(routes);
};

const updateMenu = (val) => {
  console.log("val", val);
};

const func = service.get(HttpMap.findAll).then((res) => {
  console.log(res);
});
// 路由跳转
const routeChange = (item) => {
  console.log(item);

}
const handleTo = () => {
  console.log("调用点击事件");
  func();
};

initMenu();
</script>
